<template>
	<div class="page-container">
		<el-card class="page-form-card">
			<el-form :model="form" label-width="75px">
				<el-form-item label="活动时间:">
					<div class="flex items-center">
						<el-date-picker v-model="date" class="!w-[240px]" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
						<el-button type="primary" class="!w-[100px] !h-[36px] ml-[49px]" @click="handleDate">批量修改</el-button>
					</div>
				</el-form-item>
				<el-form-item label="商品限购:">
					<div class="flex items-center">
						<el-input v-model.trim="form.purchaseCount" placeholder="请输入限购数量，输入0则不限购数量" class="!w-[240px]"></el-input>
						<el-button type="primary" class="!w-[100px] !h-[36px] ml-[49px]" @click="handleCollageCount">批量修改</el-button>
					</div>
				</el-form-item>
				<el-form-item label="选择商品:">
					<el-button type="primary" class="!w-[100px] !h-[36px] mb-[26px]" @click="handleCreate">添加商品</el-button>
					<div v-if="selectList.length > 0" class="w-full">
						<el-table :data="selectList" stripe>
							<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
							<el-table-column :formatter="emptyToString" align="center" label="专区" prop="zoneName" show-overflow-tooltip min-width="120"> </el-table-column>
							<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId" min-width="120"></el-table-column>
							<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goodsName" show-overflow-tooltip min-width="156"> </el-table-column>
							<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
								<template slot-scope="scope">
									<el-image :preview-src-list="[scope.row.picture]" :src="scope.row.picture" style="width: 48px; height: 48px"></el-image>
								</template>
							</el-table-column>
							<el-table-column :formatter="emptyToNumber" align="center" label="供应商名称" prop="userName" min-width="120" />
							<el-table-column :formatter="emptyToNumber" align="center" label="商品价格" prop="retailPrice" min-width="156" />
							<el-table-column :formatter="emptyToNumber" align="center" label="供应价格" prop="supplyPrice" min-width="156" />
							<el-table-column :formatter="emptyToNumber" align="center" label="库存" prop="inventory" min-width="120" />
							<el-table-column :formatter="emptyToNumber" align="center" label="秒杀价格" prop="killPrice" min-width="120">
								<template slot="header">
									<div class="flex items-center text-[12px] justify-center"><span class="text-[#F14A46]">*</span>秒杀价格</div>
								</template>
								<template slot-scope="scope">
									<el-input v-model.trim="scope.row.killPrice" placeholder="价格"></el-input>
								</template>
							</el-table-column>
							<el-table-column :formatter="emptyToNumber" align="center" label="限购数量" prop="purchaseCount" min-width="120">
								<template slot-scope="scope">
									<el-input v-model.trim="scope.row.purchaseCount" placeholder="数量"></el-input>
								</template>
							</el-table-column>
							<el-table-column :formatter="emptyToNumber" align="center" label="活动时间" prop="date" min-width="400">
								<template slot="header">
									<div class="flex items-center text-[12px] justify-center"><span class="text-[#F14A46]">*</span>活动时间</div>
								</template>
								<template slot-scope="scope">
									<el-date-picker
										v-model="scope.row.date"
										class="!w-[360px]"
										type="datetimerange"
										format="yyyy-MM-dd HH:mm:ss"
										value-format="yyyy-MM-dd HH:mm:ss"
										range-separator="至"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
									>
									</el-date-picker>
								</template>
							</el-table-column>
              <el-table-column :formatter="emptyToNumber" align="center" label="是否参与分佣" prop="isBonus" min-width="120">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.isBonus"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="开启"
                    class="switch"
                    inactive-text="禁用"
                  ></el-switch>
                </template>
              </el-table-column>
							<el-table-column :width="100" align="center" fixed="right" header-align="center" label="操作">
								<template slot-scope="scope">
									<div class="table-action flex justify-center">
										<el-button type="danger" @click="handleDel(scope)">删除</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-form-item>
			</el-form>
			<div v-if="selectList.length > 0" class="flex items-center justify-center mt-[100px]">
				<el-button type="primary" class="!w-[236px] !h-[60px]" @click="handleOk">确定</el-button>
				<el-button class="!w-[236px] !h-[60px] !ml-[20px]" @click="$router.back()">取消</el-button>
			</div>
		</el-card>
		<l-dialog v-model="showDialog" title="添加商品" width="914px" :show-button="false" @close="handleClose">
			<el-form ref="queryParam" :inline="true" label-width="100px" :model="queryParams">
				<el-form-item label="专区选择:" prop="zoneId">
					<el-select v-model.trim="queryParams.zoneId" class="el-input-240" clearable filterable placeholder="请选择专区">
						<el-option v-for="(value, index) in zoneList" :key="index" :label="value.zoneName" :value="value.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品ID:" prop="goodsId">
					<el-input v-model.trim="queryParams.goodsId" class="!w-[240px]" maxlength="6" show-word-limit clearable placeholder="请输入商品ID"></el-input>
				</el-form-item>
				<el-form-item label="商品名称:" prop="goodsName">
					<el-input v-model.trim="queryParams.goodsName" class="!w-[240px]" maxlength="30" show-word-limit clearable placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="供应商名称:">
					<el-input v-model.trim="queryParams.userName" class="!w-[240px]" maxlength="30" show-word-limit clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
				<el-form-item>
					<div class="page-search-btn">
						<el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" type="primary" plain @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="flex items-center text-[12px] mb-[11px]">
				已选择（<span class="text-[#F14A46]">{{ multipleSelection.length }}</span
				>）个商品
			</div>
			<el-table v-loading="loading" :data="tableData" stripe @sort-change="handleSortChange" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId" min-width="120"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goodsName" show-overflow-tooltip min-width="156">
					<template slot-scope="scope">
						<span style="color: var(--primary-color)">
							{{ scope.row.goodsName }}
						</span>
					</template>
				</el-table-column>

				<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
					<template slot-scope="scope">
						<el-image :preview-src-list="[scope.row.picture]" :src="scope.row.picture" style="width: 48px; height: 48px"></el-image>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToNumber" align="center" label="供应商名称" prop="userName" min-width="120" />
				<el-table-column :formatter="emptyToNumber" align="center" label="商品价格（元）" prop="retailPrice" sortable min-width="156" />
				<el-table-column :formatter="emptyToNumber" align="center" label="供应价格（元）" prop="supplyPrice" sortable min-width="156" />
			</el-table>
			<pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
			<div class="flex justify-center items-center mt-[22px]">
				<el-button type="primary" class="!w-[236px] !h-[60px]" @click="handleSubmit">确定</el-button>
				<el-button class="!w-[236px] !h-[60px] !ml-[20px]" @click="handleClose">取消</el-button>
			</div>
		</l-dialog>
	</div>
</template>

<script>
import { getZoneList } from '@/api/mall/prefecture';
import snakeCase from 'lodash/snakeCase';

export default {
	name: 'Form',
	data() {
		return {
			form: {
				startTime: null,
				endTime: null,
				purchaseCount: null,
			},
			date: [],
			tableData: [],
			zoneList: [],
			multipleSelection: [],
			selectList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				zoneId: null,
				goodsId: null,
				goodsName: null,
				userName: null,
			},
			total: 0,
			loading: false,
			showDialog: false,
		};
	},
	created() {
		this.getZoneList();
	},
	methods: {
		handleDate() {
			if (this.date.length < 1) {
				this.$message.error('请选择活动时间');
				return;
			}
			this.selectList.forEach((item) => {
				item.date = this.date;
			});
		},
		handleCollageCount() {
			if (!this.form.purchaseCount) {
				this.$message.error('请输入商品限购');
				return;
			}
			this.selectList.forEach((item) => {
				item.purchaseCount = this.form.purchaseCount;
			});
		},
		getZoneList() {
			getZoneList({}).then((res) => {
				this.zoneList = res.data;
			});
		},
		getTime(startTime, endTime) {
			this.form.startTime = startTime;
			this.form.endTime = endTime;
		},
		handleCreate() {
			this.showDialog = true;
			this.handleQuery();
		},
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		resetQuery() {
			this.$refs.queryParam.resetFields();
			this.handleQuery();
		},
		handleSortChange(sort) {
			this.queryParams.sortStr = snakeCase(sort.prop);
			this.queryParams.sortDesc = sort.order;
			this.getList();
		},
		getList() {
			this.loading = true;
			this.$request
				.post('/mall/zoneGoods/list', this.queryParams)
				.then((response) => {
					this.tableData = response.data.records;
					this.total = response.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleSelectionChange(val) {
			this.multipleSelection = val.map((item) => ({
				...item,
				killPrice: null,
				purchaseCount: null,
				date: [],
			}));
		},
		handleSubmit() {
			this.selectList = this.multipleSelection;
			this.handleClose();
		},
		handleClose() {
			this.$refs.queryParam.resetFields();
			this.showDialog = false;
		},
		handleDel(scope) {
			this.selectList.splice(scope.$index, 1);
		},
		handleOk() {
			if (this.selectList.length < 1) {
				this.$message.error('请添加商品');
				return;
			}
			const killPrice = this.selectList.some((item) => !item.killPrice);
			if (killPrice) {
				this.$message.error('请输入秒杀价格');
				return;
			}
			const date = this.selectList.some((item) => item.date.length < 1);
			if (date) {
				this.$message.error('请选择活动时间');
				return;
			}
			const data = this.selectList.map((item) => {
				// eslint-disable-next-line no-unused-vars
				const { tenantId, ...rest } = item;
				return {
					...rest,
					originPrice: item.killPrice,
					startTime: item.date[0] || null,
					endTime: item.date[1] || null,
				};
			});
			this.$request.post('/mall/pc/kill/add', data).then(() => {
				this.$message.success('添加成功');
				setTimeout(() => {
					this.$router.back();
				}, 500);
			});
		},
	},
};
</script>

<style scoped></style>
